<template>
  <div class="wapper">
    <div class="temp">
      <navbar @func="getMsgFormSon" @func1="getMsgFormSon1" @func2="getMsgFormSon2"></navbar>
    </div>
    <div :style="{marginTop: (msgFormSon+msgFormSon1+5)+ 'px',marginBottom:50+'px'}">
      <scroll-view>
        <div v-for="(item,index) of imgUrls" :key="index"  @touchstart="touchS"  @touchmove="touchM" style="display: flex;flex-direction: row;">
          <div :style="{width:windowWidth+'px'}">
          <div class="panel" :style="{marginLeft: -item.del+'px',width:windowWidth+'px'}">
            <input :checked=item.flag @click="checkone(index,item.paintingId)" type="radio" class="checkor"/>
            <image :src="item.pmUrl" class="img" @click="goin(item.paintingId)"></image>
            <div class="div" @click="goin(item.paintingId)">
              <p class="text">{{item.paintingName}}</p>
            </div>
            <div class="price" @click="goin(item.paintingId)">
              <p class="paypay">¥{{item.discountPrice}}</p>
              <p class="paypay1" v-if="item.paintingPrice!==item.discountPrice">¥{{item.paintingPrice}}</p>
            </div>
          </div>
          </div>
          <div style="width: 80px">
            <div class="delete" @click="delt(item.key)" :style="{marginRight: item.del+'px'}">删除</div>
          </div>
        </div>
        <div v-for="(item,index) of oldimgUrls" :key="index"  @touchstart="touchS1"  @touchmove="touchM1" style="display: flex;flex-direction: row;width: 455px">
          <div :style="{width:windowWidth+'px'}">
          <div class="panel" :style="{marginLeft: -item.del+'px',width:windowWidth+'px'}">
            <input :checked=item.flag @click="checkone(index,item.paintingId)" type="radio" class="checkor" disabled/>
            <image :src="item.pmUrl" class="img" @click="goin(item.paintingId)"></image>
            <div class="div" @click="goin(item.paintingId)">
              <p class="text" style="color: #666666">{{item.paintingName}}</p>
            </div>
            <div class="price" @click="goin(item.paintingId)">
              <p class="paypay">¥{{item.paintingPrice}}</p>
              <p class="paypay" style="color: #666666;font-size: 14px">已失效</p>
            </div>
          </div>
          </div>
          <div class="delete" @click="delt(item.key)" :style="{marginRight: item.del+'px'}">删除</div>
        </div>
      </scroll-view>
    </div>
    <div class="under">
      <div class="lable">
        <input type="radio" name="reset" @click="inputdo" :checked="check" class="inputdo"/><label
        class="label">全选</label>
      </div>
      <div>
        <p class="money">共计{{allmoney}}元</p>
      </div>
      <div class="pay" @click="pay()">
        <p class="payall">去结算</p>
      </div>
    </div>
  </div>
</template>

<script>
  import Navbar from './../../components/navbar'

  export default {
    components: {
      Navbar
    },
    data() {
      return {
        check: false,
        imgUrls: [],
        oldimgUrls: [],
        payInfo: [],
        msgFormSon: '',
        msgFormSon1: '',
        msgFormSon2: '',
        chooseAfterValue: [],
        count: 0,
        allmoney: 0,
        clientX1:'',//滑动开始位置
        clientX2:'',
        del:0,//内容初始的right距离
        btnWidth:80,//删除按钮宽度,
        depart:[],
        imgUrlslenth:0,
        oldimgUrlslenth:0,
        list:[],
        oldlist:[],
        windowWidth:''
      }
    },
    onShow(){
      this.find();
    },
    onPullDownRefresh () {
      this.find();
    },
    methods: {
      getMsgFormSon(data) {
        this.msgFormSon = data;
      },
      getMsgFormSon1(data) {
        this.msgFormSon1 = data;
      },
      getMsgFormSon2(data) {
        this.msgFormSon2 = data;
      },
      inputdo() {
        this.check = !this.check;
        if (this.check === false) {
          for (let i = 0; i < this.imgUrls.length; i++) {
            this.chooseAfterValue = [];
            this.imgUrls[i].flag = false
          }
        } else {
          for (let i = 0; i < this.imgUrls.length; i++) {
            this.chooseAfterValue.push(this.imgUrls[i].paintingId);
            this.imgUrls[i].flag = true
          }
        }
        this.allmoney = 0;
        for (let i = 0; i < this.imgUrls.length; i++) {
          if (this.imgUrls[i].flag === true) {
            this.allmoney += Number(this.imgUrls[i].discountPrice);
          }
        }
        this.$forceUpdate();
      },
      checkone(index, paintingId) {
        this.allmoney = 0;
        this.imgUrls[index].flag = !this.imgUrls[index].flag;
        for (let i = 0; i < this.imgUrls.length; i++) {
          if (this.imgUrls[i].flag === true) {
            this.allmoney += Number(this.imgUrls[i].discountPrice);
          }
        }
        this.$forceUpdate();
        if (this.chooseAfterValue.indexOf(paintingId) !== -1) {
          this.chooseAfterValue.splice(this.chooseAfterValue.indexOf(paintingId), 1);
          this.count--;
        } else {
          if (this.count < 1) {
            this.chooseAfterValue.push(paintingId);
            this.count++;
          } else {
            this.chooseAfterValue.push(paintingId);
          }
        }
      },
      find() {
        this.chooseAfterValue=[];
        this.imgUrls=[];
        this.oldimgUrls=[];
        this.imgUrlslenth=0;
        this.oldimgUrlslenth=0;
        this.allmoney=0;
        this.list=[];
        this.oldlist=[];
        this.$request.post({
          url: '/api/shoppingCar/query',
          data: {
            "current": 0,
            "pageSize": 10,
          }
        }).then(res => {
          for (let i = 0; i < res.length; i++) {
            if (res[i].isSole === 0) {
              this.imgUrlslenth++;
              this.list.push(res[i]);
            } else {
              this.oldimgUrlslenth++;
              this.oldlist.push(res[i]);
            }
          }
          for(let j=0;j<this.imgUrlslenth;j++)
          {
            this.imgUrls[j] = this.list[j];
            this.imgUrls[j].flag = false;
            this.imgUrls[j].discountPrice = Number(this.imgUrls[j].paintingPrice - this.imgUrls[j].discountedPrice).toFixed(2);
            this.imgUrls[j].del = 0;
          }
          for(let j=0;j<this.oldimgUrlslenth;j++)
          {
            this.oldimgUrls[j] = this.oldlist[j];
            this.oldimgUrls[j].flag = false;
            this.oldimgUrls[j].discountPrice = Number(this.oldimgUrls[j].paintingPrice - this.oldimgUrls[j].discountedPrice).toFixed(2);
            this.oldimgUrls[j].del = 0;
          }
        })
      },
      pay() {
        if(this.allmoney!==0)
        {
          const url = '/pages/orderConfirmed/main?paintingIds=' + this.chooseAfterValue;
          wx.navigateTo({url})
        }
        else{
          this.check=false;
          for (let i = 0; i < this.imgUrls.length; i++) {
            this.imgUrls[i].flag =false
          }
        }
      },
      touchS(e){
        this.clientX1=e.clientX
      },
      touchM(e){
        this.depart=e.currentTarget.dataset.eventid.split('_');
        this.clientX2=e.clientX
        let disX=this.clientX1-this.clientX2
        if (disX == 0 || disX < 0) {//如果移动距离小于等于0，说明向右滑动，文本层位置不变
          //this.del = 0;
          this.imgUrls[this.depart[1]].del=0;
        }
        if (disX >= this.btnWidth) {
          //控制手指移动距离最大值为删除按钮的宽度
          //this.del =this.btnWidth;
          this.imgUrls[this.depart[1]].del=this.btnWidth;
        }
      },
      touchS1(e){
        this.clientX1=e.clientX
      },
      touchM1(e){
        this.depart=e.currentTarget.dataset.eventid.split('_');
        this.clientX2=e.clientX
        let disX=this.clientX1-this.clientX2
        if (disX == 0 || disX < 0) {//如果移动距离小于等于0，说明向右滑动，文本层位置不变
          //this.del = 0;
          this.oldimgUrls[this.depart[1]].del=0;
        }
        if (disX >= this.btnWidth) {
          //控制手指移动距离最大值为删除按钮的宽度
          //this.del =this.btnWidth;
          this.oldimgUrls[this.depart[1]].del=this.btnWidth;
        }
      },
      delt(key){
        this.$request.post({
          url: '/api/shoppingCar/remove',
          data: {
            "scIds":[key]
          }
        }).then(res => {
          if(res.longResult>=1){
            this.find()
          }
          else{
            wx.showToast({
              title: '删除失败',
              icon: 'none',
              duration: 2000
            })
          }
        })
      },
      goin(paintingId){
        const url = '/pages/productDetail/main?paintingId='+paintingId;
        wx.navigateTo({ url })
      }
    },
    created() {
      this.windowWidth = wx.getSystemInfoSync().windowWidth
    }
  }
</script>

<style scoped>
  .aaaaa {
    margin-top: 100px;
  }

  .wapper {
    background-color: #F7F7F7;
  }

  .temp {
    position: absolute;
  }

  .under {
    width: 375px;
    height: 50px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
  }

  .lable {
    margin-left: 10px;
  }

  .label {
    margin-left: 4px;
    margin-top: 20px;
  }

  .inputdo {
    margin-top: 15px;
  }

  .money {
    margin-left: 22px;
    margin-top: 15px;
  }

  .pay {
    position: fixed;
    right: 0;
    width: 114px;
    height: 50px;
    background: rgba(144, 42, 38, 1);
  }

  .payall {
    margin-top: 15px;
    margin-left: 34px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 20px;
  }

  .panel {
    height: 106px;
    background: rgba(255, 255, 255, 1);
    margin-top: 8px;
    flex-direction: column;
    justify-content: center;
  }

  .img {
    width: 74px;
    height: 70px;
    position: absolute;
    margin-top: 16px;
    margin-left: 38px;
  }

  .checkor {
    position: absolute;
    margin-top: 40px;
    margin-left: 6px;
  }

  .text {
    word-break: break-all;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }

  .div {
    margin-left: 120px;
    margin-top: 16px;
    position: absolute;
    width: 243px;
    height: 44px;
  }

  .paypay {
    margin-left: 120px;
    margin-top: 68px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(225, 140, 30, 1);
    line-height: 22px;
  }
  .paypay1 {
    margin-left: 5px;
    margin-top: 68px;
    font-size: 10px;
    font-weight: 500;
    line-height: 22px;
    color: #a5a7ad;
    text-decoration: line-through
  }

  .price {
    display: flex;
    flex-direction: row;
  }
  .delete{
    color:#fff;
    height: 106px;
    text-align: center;
    width:80px;
    background: red;
    line-height: 120px;
    right:0;
    margin-top: 7px;
  }
</style>
